<template>
  <div class="App">
    <div>
      <router-link to="/">首页 | </router-link>
      <router-link to="/about">关于</router-link>
    </div>

    <el-color-picker
      class="theme-picker"
      popper-class="theme-picker-dropdown"
      v-model="theme"
      :size="size"
    >
    </el-color-picker>
    <el-select
      v-model="fontSize"
      style="width: 100px"
      size="mini"
      @change="changeFontSize"
    >
      <el-option
        v-for="(item, index) in fontSizeOptions"
        :label="item.label"
        :value="item.value"
        :key="index"
      ></el-option>
    </el-select>

    <router-view></router-view>
  </div>
</template>

<script>
import mixinsTheme from "@/mixins/mixinsTheme";

export default {
  mixins: [mixinsTheme],
  name: "App",
  data() {
    return {
      fontSize: "16px",
      fontSizeOptions: [
        { label: "16px", value: "16px" },
        { label: "18px", value: "18px" },
        { label: "20px", value: "20px" },
      ],
    };
  },
  watch: {},
  created() {
    this.$store.dispatch("getThemeColor");
  },
  methods: {},
};
</script>

<style>
.theme-picker .el-color-picker__trigger {
  vertical-align: middle;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>